<template>
	<view class="login-box">
		<u-popup :show="showLogin" mode="center" round="20" @close="close" closeable>
			<view class="login">
				<u-text text="欢迎登录平台" size="22"></u-text>
				<view class="user-name" style="padding-top: 50rpx;">
					<u-text text="用户名" size="18"></u-text>
					<view class="flex-center">
						<uni-icons type="person" color="rgb(0, 0, 0)" size="23"
							style="position: absolute;left: 20rpx;" />
						<input type="text" placeholder-class="placeholder-class" class="user-name-input"
							placeholder="请输入用户名" style="">
					</view>

				</view>
				<view class="user-name">
					<u-text text="密码" size="18"></u-text>
					<view class="flex-center">
						<uni-icons type="person" color="rgb(0, 0, 0)" size="23"
							style="position: absolute;left: 20rpx;" />
						<input type="text" placeholder-class="placeholder-class" placeholder="请输入密码"
							class="user-name-input">
					</view>

				</view>
				<view class="user-name">
					<u-text text="验证码" size="18"></u-text>
					<view class="flex-center">
						<uni-icons type="person" color="rgb(0, 0, 0)" size="23"
							style="position: absolute;left: 20rpx;" />
						<input type="text" placeholder-class="placeholder-class" placeholder="请输入验证码"
							class="user-name-input">
					</view>
				</view>
				<u-button text="登录" class="custom-style"></u-button>
				<text class="register" @click="toRegister">立即注册</text>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		mixins: [],
		components: {

		},
		props: {
			showLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
			}
		},
		methods: {
			close() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$emit('close')
			},
			toRegister() {
				this.$emit('close')
				this.$emit('toRegister')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.login {
		width: 600rpx;
		height: 800rpx;
		background-color: #fff;
		padding: 60rpx;

		.user-name {
			padding: 10rpx 0;

		}

		.flex-center {
			display: flex;
			align-items: center;
			width: 100%;
			position: relative;
		}

		.user-name-input {
			flex: 1;
			padding: 20rpx 70rpx;
			margin: 10rpx 0;
			background-color: #f0f0f0;
			border-radius: 10rpx;
		}

		.placeholder-class {
			padding: 0 0rpx;
		}

		.custom-style {
			background: linear-gradient(90deg, #2e41dd, #377af4 99.99%);
			color: #fff;
			margin-bottom: 10rpx;
		}

		.register {
			border-bottom: 1rpx solid #3570f0;
			color: #3570f0;
			font-size: 24rpx;
			cursor: pointer;
		}
	}
</style>